<template>
    <div class="report-two">
        <div class="body">
            <div class="list">
                <h4>
                    <span>03</span>难易度情况
                </h4>
                <div class="paint">
                    <ul class="paint-list">
                        <li class="low">
                            <div class="level">难度等级：低档题</div>
                            <div class="ratio">
                                <div id="liquid-fill-low" :style="{'width':'80%','margin-left':'10%',height:'180px'}"></div>
                                <!-- <chart class="canvas" :options="option" :style="{width:'50%',height:'20vh'}"></chart> -->
                                <div class="text-list">
                                    <div class="t-body">
                                    <div class="full-score">
                                        <span class="circle"></span>
                                        满分：{{low.score}}分
                                    </div>
                                    <div class="average-score">
                                        <span class="circle"></span>
                                        平均分：{{low.allAvg}}分
                                    </div>
                                    <div class="get-score">
                                        <span class="circle"></span>
                                        得分：{{low.stuAvg}}分
                                        <span class="need-improve">{{low.standard}}</span>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="middle">
                            <div class="level">难度等级：中档题</div>
                            <div class="ratio ">
                                <div id="liquid-fill-middle" :style="{'width':'80%','margin-left':'10%',height:'180px'}"></div>
                                <!-- <chart class="canvas" :options="middleOpt" :style="{width:'50%',height:'20vh'}"></chart> -->
                                <div class="text-list">
                                    <div class="t-body">
                                        <div class="full-score">
                                            <span class="circle"></span>
                                            满分：{{middle.score}}分
                                        </div>
                                        <div class="average-score">
                                            <span class="circle"></span>
                                            平均分：{{middle.allAvg}}分
                                        </div>
                                        <div class="get-score">
                                            <span class="circle"></span>
                                            得分：{{middle.stuAvg}}分
                                            <span class="need-improve">{{middle.standard}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="height">
                            <div class="level">难度等级：高档题</div>
                            <div class="ratio ">
                                <div id="liquid-fill-height" :style="{'width':'80%','margin-left':'10%',height:'180px'}"></div>
                                <!-- <chart class="canvas" :options="heightOpt" :style="{width:'50%',height:'20vh'}"></chart> -->
                                <div class="text-list">
                                    <div class="t-body">
                                        <div class="full-score">
                                            <span class="circle"></span>
                                            满分：{{height.score}}分
                                        </div>
                                        <div class="average-score">
                                            <span class="circle"></span>
                                            平均分：{{height.allAvg}}分
                                        </div>
                                        <div class="get-score">
                                            <span class="circle"></span>
                                            得分：{{height.stuAvg}}分
                                            <span class="need-improve">{{height.standard}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
             </div>
        </div>
    </div>
</template>
<script>

import io from '../../lib/io'
import util from '../../lib/util'
import  '../../lib/echarts/echarts-liquidfill.js'
export default {
    components: {

    },
    data() {
        return {
            reportId:'',
            low:{},
            middle:{},
            height:{},
            
            

        }
    },
    created(){
        this.reportId = this.$route.query.reportId
  
    },
    mounted(){
        this.$nextTick(()=>{
            this.reportHard()
        })
    },
    methods:{
        liquidFill (id,value,color,backgroundColor,){//方法
        // console.log(value)
           var liquid = this.$echarts.init(document.getElementById(id));
           liquid.setOption({
                series: [{
                    type: 'liquidFill',//类型
                    data: [{
                            value: value.stuAvg/value.score,
                            direction: 'left',
                            itemStyle: {
                                normal: {
                                    color: color.stu
                                }
                            }
                        },
                        ],//数据是个数组 数组的每一项的值是0-1
                    outline: {
                        show: true , //是否显示轮廓 布尔值
                        // borderDistance: 0, //外部轮廓与图表的距离 数字
                        itemStyle:{
                            borderColor: color.stu, //边框的颜色
                            borderWidth: 5,  //边框的宽度
                            shadowBlur: 0, //外部轮廓的阴影范围 一旦设置了内外都有阴影
                            //shadowColor: '#000' //外部轮廓的阴影颜色 
                        }
                    },
                    label:{
                        show:false,
                    },
                    backgroundStyle: {
                        color:'#fff',//图表的背景颜色
                        borderWidth: '10',//图表的边框宽度
                        // borderColor: '#ccc',//图表的边框颜色
                        itemStyle: {
                            shadowBlur:100,//设置无用
                            shadowColor: '#f60',//设置无用
                            opacity: 1 //设置无用
                        }    
                    },
                    itemStyle: {
                        opacity:1,//波浪的透明度
                        shadowBlur: 10,//波浪的阴影范围
                        shadowColor:'#fff'//阴影颜色
                    },
                   
                    // color: ['#ccc','red','blue',],//水波的颜色 对应的是data里面值
                    shape: 'circle',//水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
                    center: ['50%','50%'],//图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
                    radius: '70%', //图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
                    amplitude:'5%',   //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
                    waveLength:'80%',//波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
                    phase:0 ,//波的相位弧度 默认情况下是自动
                    // period: (value,index)=>{//控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引

                    //     return index*2000;
                    // },
                    // direction: 'left',//波移动的速度 两个参数  left 从右往左 right 从左往右
                    // waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
                    // animationEasing: 'linear',//初始动画
                    // animationEasingUpdate: 'quarticInOut',//数据更新的动画效果
                    // animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
                    // animationDurationUpdate : 300 //数据更新动画的时长

                }],
                //backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
           })
       },
        reportHard(){
            let param = {
                reportId:this.reportId,
            }
            io.post(io.reportHard,param,(ret)=>{
                    let data = ret
                    let low = {}
                    let middle = {}
                    let height  = {}
                    data.map((item)=>{
                        if(item.hard===1){
                            low = item
                        }else if(item.hard===2){
                            middle = item
                        }else{
                            height = item
                        }
                    })
                    this.low = low
                    this.middle = middle
                    this.height = height
                    // console.log(ret)
                    this.liquidFill('liquid-fill-low',this.low,{stu:'#f96b60',avg:"#ffb6a5"},'#ffe5e0',)
                    this.liquidFill('liquid-fill-middle',this.middle,{stu:'#39ccac',avg:'#a8e8da'},'#d7f5ee')
                    this.liquidFill('liquid-fill-height',this.height,{stu:'#4966fe',avg:'#9dadfe'},'#cbd4fe')
                
            })
        }
    },

}
</script>
<style lang="less" scoped>
.report-three {

    background: #fff;

}
.body{
    padding:46px 0;
    // background:#fff;
    .list{
        width:80%;
        max-width:960px;
        margin:0 auto;
        h4{
            font-size:32px;
            color:#ff7853;
            margin:0;
            height:32px;
            line-height:32px;
            font-weight: 100;
            span{
                height: 32px;
                line-height: 32px;
                font-weight: 100;
                // display: inline-block;
                float:left;
                font-size:40px;
                color:#488eed;
                padding-right:24px;
                margin-right:17px;
                border-right:2px solid #488eed;
            }
        }
        .paint{
            position:relative;
            margin-top:52px;
            width:100%;
            .paint-list{
                width:100%;
                display: box;               /* OLD - Android 4.4- */
                display: -webkit-box;       /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box;          /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox;       /* TWEENER - IE 10 */
                display: -webkit-flex;      /* NEW - Chrome */
                display: flex;
                li{
                    -webkit-box-flex: 1;              /* OLD - iOS 6-, Safari 3.1-6 */
                    -moz-box-flex: 1;                 /* OLD - Firefox 19- */
                    -webkit-flex: 1;                     /* Chrome */
                    -ms-flex: 1;                           /* IE 10 */
                    flex: 1; 

                    margin-right:34px;
                    height:330px;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                    .level{
                        height:42px;
                        color:#fff;
                        font-size:18px;
                        text-align: center;
                        line-height:42px;
                        border-top-left-radius: 8px;
                        border-top-right-radius: 8px;
                    }
                    .text-list{
                        font-size: 18px;
                        color: #333;

                        // line-height: 0.4rem;
                        display: -webkit-box;       /* OLD - iOS 6-, Safari 3.1-6 */
                        display: -moz-box;          /* OLD - Firefox 19- (buggy but mostly works) */
                        display: -ms-flexbox;       /* TWEENER - IE 10 */
                        display: -webkit-flex;      /* NEW - Chrome */
                        display: flex;
                        align-items: center;
                        .t-body{
                            // width:100
                            margin:0 auto;
                            div{
                                line-height: 18px;
                                height:18px;
                                margin-bottom:14px;
                                &:last-child{
                                    margin-bottom:0;
                                }
                            }
                        }
                        .need-improve{
                            color: #ff5501;
                        }
                        .circle{
                            display: inline-block;
                            width: 13px;
                            height: 13px;
                            border-radius: 50%;
                            margin-right:9px;
                            background: #f96b60;
                        }
                        
                    }
                    &:last-child{
                        margin-right:0;
                    }
                    &.low{
                        border:1px solid #f96b60;
                        box-sizing: border-box;
                        .level{
                            background:#f96b60;  
                        }

                    }
                    &.middle{
                        border:1px solid #36c8a3;
                        box-sizing: border-box;
                        .level{
                            background:#36c8a3;
                            
                        }
                        .text-list{
                            .circle{
                                background: #39ccac;
                            }
                        }
                        
                    }
                    &.height{
                        border:1px solid #488eed;
                        box-sizing: border-box;
                        .level{
                            background:#488eed;
                            
                        }
                        .text-list{
                            .circle{
                                background: #4966fe;
                            }
                        }
                        
                        
                    }
                   
  
                }
                
            }
            
        }

    }
}


</style>
